<!-- <template>
  <div class="chartBox">
    <div class="left">
      <div style="margin: 10px 0">
        <el-button type="primary" @click="dialogVisible = true"
          >设置AI角色</el-button
        >
      </div>
      <el-select
        popper-class="eloption"
        v-model="aiModleValue"
        placeholder="Select"
        style="width: 80%"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :disabled="item.disabled"
        />
      </el-select>
    </div>
    <div class="right">
      <div class="oner" ref="messageBox">
        <ul>
          <li
            :class="[index % 2 == 0 ? 'user' : 'api']"
            v-for="(item, index) in historyMessage"
            :key="index"
          >
            <div class="message-content" v-if="index % 2 == 0">
              {{ item.message }}
            </div>
            <div
              class="message-success_content"
              v-if="index % 2 != 0 && item.type == 'success'"
            >
              <div style="margin-right: 15px">
                <img :src="item.logo" alt="" class="aiLogo" />
              </div>
              <Markdown :source="item.message" />
            </div>
            <div
              class="message-success_content"
              v-if="index % 2 != 0 && item.type == 'error'"
            >
              <div style="margin-right: 15px">
                <img :src="item.logo" alt="" class="aiLogo" />
              </div>
              <p style="color: red">
                {{ item.message }}
              </p>
            </div>
          </li>
          <li v-if="loading">
            <div>
              <img
                style="height: 60px"
                src="../../assets/icon/loading.gif"
                alt="生成中"
              />
            </div>
          </li>
        </ul>
      </div>
      <div class="chat-input-container" tabindex="0" data-testid="chat_input">
        <div class="chat-input grid-container">
          <div class="grid-input-area">
            <div
              class="container-AilALM flow-xs54Ev input custom-scrollbar-xZDNG1 semi-input-textarea-wrapper"
            >
              <textarea
                ref="inputRef"
                id="chatMessages"
                dir="ltr"
                v-model="messageValue"
                rows="1"
                autocomplete="off"
                data-testid="chat_input_input"
                cols="20"
                class="semi-input-textarea semi-input-textarea-autosize"
                placeholder="发消息"
                @keydown="handleKeydown"
                @input="handleInputMessage"
              ></textarea>
            </div>
            <div class="line"></div>
            <button
              id="flow-end-msg-send"
              aria-disabled="false"
              aria-label="发送"
              data-testid="chat_input_send_button"
              aria-describedby="9du7ipz"
              tabindex="0"
              data-popupid="9du7ipz"
              class="semi-button semi-button-primary send-btn-fDrkYV semi-button-with-icon semi-button-with-icon-only"
              type="button"
              @click="handleSendMessage"
            >
              <span class="semi-button-content"
                ><span role="img" class="semi-icon semi-icon-default"
                  ><svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="1em"
                    height="1em"
                    fill="currentColor"
                    viewBox="0 0 28 28"
                    :style="{
                      color: messageValue.length == 0 ? '#aaa' : '#06f',
                    }"
                  >
                    <path
                      d="M14.007 28q-2.881 0-5.418-1.11a14.3 14.3 0 0 1-4.453-3.026 14.5 14.5 0 0 1-3.04-4.453Q0 16.875 0 13.993q0-2.868 1.095-5.404Q2.191 6.053 4.121 4.12A14.5 14.5 0 0 1 8.59 1.095Q11.124 0 13.993 0t5.404 1.095q2.536 1.096 4.467 3.026A14.2 14.2 0 0 1 26.89 8.59Q28 11.124 28 13.993q0 2.881-1.095 5.418a14.3 14.3 0 0 1-3.027 4.453 14.2 14.2 0 0 1-4.467 3.026Q16.876 28 14.007 28m.015-6.917q.518 0 .835-.317.332-.332.332-.836v-6.816l-.13-2.969 1.37 1.672 1.599 1.643q.316.33.807.331.475 0 .792-.303a.99.99 0 0 0 .332-.763q0-.475-.332-.807L14.944 7.22q-.433-.447-.922-.447-.476 0-.908.447L8.43 11.918q-.317.317-.317.807 0 .461.317.763.318.303.778.303.49 0 .807-.331l1.629-1.658 1.326-1.642-.116 2.954v6.816q0 .504.332.836.331.317.836.317"
                    ></path></svg></span
              ></span>
            </button>
          </div>
        </div>
      </div>
    </div>

    <el-dialog v-model="dialogVisible" title="AI角色" width="30%">
      <el-input v-model="systemValue" placeholder="请输入内容"></el-input>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false"
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { sendAiMessage, getAiList } from "@/api/common/index";
import { doubao, tongyi, wenxin, chatgpt } from "@/assets/aiImage/index";

export default {
  data() {
    return {
      aiModleValue: "gpt-4o-mini",
      options: [],
      messageValue: "",
      historyMessage: [],
      loading: false,
      dialogVisible: false,
      systemValue: "你是一名知识丰富的DBA",
    };
  },
  async mounted() {
    const res = await getAiList();
    Object.keys(res).forEach((f) => {
      this.options.push({
        value: f,
        label: `${res[f]}(${f})`,
      });
    });
  },
  created() {
    window.addEventListener("resize", this.calculateInputHeight);
  },
  methods: {
    handleInputMessage(e) {
      const inputElement = this.$refs.inputRef;
      if (inputElement === null) {
        return;
      }
      const computedInputStyle = window.getComputedStyle(inputElement);
      const maxHeightString = computedInputStyle.getPropertyValue("max-height");
      const maxHeight = parseInt(maxHeightString);
      inputElement.setAttribute("style", `height: auto; overflow-y: hidden;`);
      console.log(`height: ${inputElement.scrollHeight}px;`);
      inputElement.setAttribute(
        "style",
        `height: ${inputElement.scrollHeight}px; ${
          inputElement.scrollHeight > maxHeight
            ? `overflow-y: auto;`
            : "overflow-y: hidden;"
        }`
      );
    },
    handleKeydown(event) {
      this.handleInputMessage();
      if (event.key === "Enter" && !event.shiftKey) {
        event.preventDefault();

        this.handleSendMessage();
      }
    },
    scrollToBottom() {
      this.$nextTick(() => {
        const scrollElem = this.$refs.messageBox;
        scrollElem.scrollTo({
          top: scrollElem.scrollHeight,
          behavior: "smooth",
        });
      });
    },
    getLogoUrl() {
      const logoMap = {
        ERNIE: wenxin,
        gpt: chatgpt,
        ep: doubao,
        qwen: doubao,
      };

      for (const key in logoMap) {
        if (this.aiModleValue.includes(key)) {
          return logoMap[key];
        }
      }

      return false;
    },
    async handleSendMessage() {
      if (
        this.messageValue.replace(/[\r\n\s]/g, "").length < 1 ||
        this.loading
      ) {
        return;
      }
      this.loading = true;
      let value = this.messageValue;
      this.messageValue = "";
      this.historyMessage.push({
        type: "user",
        message: value,
      });
      this.scrollToBottom();
      const res = await sendAiMessage({
        model: this.aiModleValue,
        messages: [
          {
            role: "system",
            content: this.systemValue,
          },
          {
            role: "user",
            content: value,
          },
        ],
      });
      if (res.error) {
        this.historyMessage.push({
          type: "error",
          message: res.error.message,
          logo: this.getLogoUrl(),
        });
        this.loading = false;
        return;
      }
      this.historyMessage.push({
        type: "success",
        message: res.choices[0].message.content,
        logo: this.getLogoUrl(),
      });
      this.loading = false;
      this.scrollToBottom();
    },
  },
};
</script> -->
<style scoped>
.user {
  text-align: right;
}

.user > div {
  text-align: left;
  word-break: break-word;
  white-space: pre-wrap;
  border-radius: 15px;
  padding: 5px 10px;
  display: inline-block;
  width: auto;
  color: #121512;
  background-color: rgb(245, 245, 245);
}

p {
  font: 400 16px / 24px Inter, -apple-system, BlinkMacSystemFont, Segoe UI,
    SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;
}

.chartBox {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.chartBox {
  display: flex;
}

.left {
  width: 25%;
  background-color: rgb(244, 244, 244);
  padding-left: 15px;
  height: 100%;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  padding-top: 20px;
}

.left > .chart-select {
  padding: 0 5px;
  width: 80%;
  height: 50px;
  margin: 30px auto;
  border: 1px solid rgb(192, 196, 204);
}

.send-btn-fDrkYV svg {
  transition: color 0.2s linear;
}

.right {
  width: 100%;
  height: 100%;
  padding: 0 5%;
  /* text-align: center; */
  position: relative;
  background-color: #fff;
}

.info {
  position: absolute;
  bottom: 0;
}

.oner {
  height: 80%;
  overflow: auto;
  margin: 30px 0;
  padding: 0 15px;
}

.chat-input-container {
  border: 1px solid rgb(229, 229, 229);
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 6px 10px 0 rgba(42, 60, 79, 0.1);
  box-sizing: border-box;
  position: fixed;
  bottom: 30px;
  width: 70%;
  z-index: 9999;
}

.grid-container {
  align-items: flex-end;
  display: grid;
  gap: 10px;
  grid-template-areas: "left-tools input-area right-tools";
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto;
  width: 100%;
}

.chat-input {
  background: #fff;
  border-radius: 220px;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  padding: 12px 12px 12px 14px;
  position: relative;
}

.grid-container .grid-input-area {
  align-self: center;
  width: 100%;
  grid-area: input-area;
  display: flex;
  align-items: center;
}

.chat-input .input {
  background-color: transparent !important;
}

.chat-input .input {
  align-self: center;
  border-radius: 0 !important;
  border-width: 0 !important;
  caret-color: #0057ff;
  caret-color: #0057ff;
  flex: 1 1 !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  padding: 0 !important;
  width: 100% !important;
}

.container-AilALM.flow-xs54Ev.semi-input-textarea-wrapper .semi-input-textarea {
  border-radius: 12px;
  cursor: auto;
  font: 400 16px / 24px Inter, -apple-system, BlinkMacSystemFont, Segoe UI,
    SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;
  overflow-anchor: auto;
  overflow-y: auto;
  padding: 0 12px;
}

.chat-input .input .semi-input-textarea {
  max-height: 180px !important;
  min-width: 0px !important;
  padding: 0 0 0 0 !important;
}

.chat-input .input textarea {
  border-radius: 0 !important;
  color: #000;
  color: var(--color-neutral-100, #000);
}

.semi-input-textarea {
  background-color: transparent;
  border: 0 solid transparent;
  box-shadow: none;
  box-sizing: border-box;
  color: rgb(28, 31, 35);
  cursor: text;
  font: 400 16px / 24px Inter, -apple-system, BlinkMacSystemFont, Segoe UI,
    SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  outline: none;
  padding: 5px 12px;
  position: relative;
  resize: none;
  vertical-align: bottom;
  width: 100%;
}

.send-btn-fDrkYV,
.send-btn-fDrkYV svg {
  height: 32px;
  width: 32px;
}
.send-btn-fDrkYV {
  background-color: #f5f5f5;
  border: 0;
  border-radius: 18px;
  box-sizing: border-box;
  padding: 0;
}

.semi-button {
  cursor: pointer;
}

.line {
  width: 1px;
  height: 20px;
  background: rgba(0, 0, 0, 0.2);
  margin: 0 10px;
}

.api {
  margin: 10px 0;
}

.message-success_content {
  display: flex;
  margin: 25px 0;
}

.aiLogo {
  width: 25px;
  border-radius: 20px;
}

.message-content {
  font: 400 16px / 24px Inter, -apple-system, BlinkMacSystemFont, Segoe UI,
    SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;
}
</style>

<style>
.eloption .el-select-dropdown__wrap {
  max-height: 400px !important;
}
</style>
